<template>
  <div>
    <div class="title">
      <button v-for="(item,index) in arr" :key="index" @click="onClick(index)">{{item}}</button>
    </div>
    <first v-show="one"></first>
    <second v-show="two"></second>
    <homeWork v-show="three"></homeWork>
  </div>
</template>
<script>
import first from "./components/index";
import second from "./components/second";
import homeWork from "./components/homeWork";
export default {
  data() {
    return {
      one: true,
      two: false,
      three: false,
      arr: ["购物车", "走一走/加减",'homeWork']
    };
  },
  components: {
    first,
    second,
    homeWork
  },
  methods: {
    onClick(a) {
      if (a == 0) {
        this.one = true;
        this.two = false;
        this.three = false;
      } else if (a == 1) {
        this.two = true;
        this.one = false;
        this.three = false;
      } else if (a == 2) {
        this.three = true;
        this.two = false;
        this.one = false;
      }
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped lang='less'>
.title {
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  border-top: 2px solid yellow;
  border-bottom: 2px solid yellow;
  button {
    width: 100px;
    height: 75px;
  }
}
</style>